import React, { Component } from 'react'
import { Form, Input, Button, Image, Row, Col } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import axios from '../utils/axios'
import { connect } from "react-redux";
import { UserInfo } from '@/store/modules/user';
import { Menu } from '@/store/modules/menu';

const formStyle = {
  width: '400px',
  margin: '160px auto'
}

type LoginProps = {
  setToken: Function
  setUserInfo: Function
  initMenu: Function
}

class Login extends Component<LoginProps> {

  username = {
    name: 'username',
    rules: [
      {
        required: true,
        message: '请输入账号',
      },
    ]
  }

  password = {
    name: 'password',
    rules: [
      {
        required: true,
        message: '请输入密码',
      },
    ]
  }

  code = {
    name: 'code',
    rules: [
      {
        required: true,
        message: '请输入验证码',
      },
    ]
  }

  state = {
    uuid: '',
    captchaCode: ''
  }

  componentDidMount() {
    this.getCaptchaCode()
  }

  render() {
    return (
      <Form
        style={formStyle}
        initialValues={{
          remember: true,
        }}
        onFinish={this.login}
      >
        {/* 账号 */}
        <Form.Item {...this.username}>
          <Input prefix={<UserOutlined />} placeholder="账号" />
        </Form.Item>
        {/* 密码 */}
        <Form.Item {...this.password}>
          <Input
            prefix={<LockOutlined />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        {/* 验证码 */}
        <Form.Item>
          <Row gutter={8}>
            <Col span={16}>
              <Form.Item
                {...this.code}
                noStyle
              >
                <Input prefix={<UserOutlined />} placeholder="验证码" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Image
                src={this.state.captchaCode}
                alt="验证码"
                style={{
                  display: 'inline-block',
                  verticalAlign: 'top',
                  cursor: 'pointer',
                  paddingLeft: '10px',
                  width: '100px',
                }}
                preview={false}
                onClick={this.getCaptchaCode}
              />
            </Col>
          </Row>
        </Form.Item>
        {/* 登录 */}
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }

  getCaptchaCode = async () => {
    const { img, uuid } = await axios.get('/captchaImage', false)
    const imgdata = `data:image/png;base64,${img}`
    this.setState({
      captchaCode: imgdata,
      uuid
    })
  }

  login = (values: any) => {
    axios({
      url: '/login',
      method: 'POST',
      data: {
        ...values,
        uuid: this.state.uuid
      }
    }, false).then(({ token = '' }) => {
      this.props.setToken(token)
      axios.get('/getRouters').then((res: { data: Menu[] }) => {
        this.props.initMenu(res.data)
        window.location.href = '/'
      })
    }).catch(this.getCaptchaCode)
  }
}

export default connect(() => ({}), {
  setUserInfo: (payload: UserInfo) => ({
    type: "user/setInfo",
    payload
  }),
  setToken: (payload: string) => ({
    type: "user/setToken",
    payload
  }),
  initMenu: (payload: Menu[]) => ({
    type: "menu/init",
    payload
  })
})(Login)
